<template>
  <div>
    <el-form ref="form"  :model="form" :rules="rules" >
        <el-form-item label="选择下一步"  prop="activityId" v-if="grcUserTasks.length>0">
            <el-radio-group v-model="form.activityIndex">
              <el-radio v-for="(item,index)  in grcUserTasks"  :label="index" >
              <font v-if="!item.willEnd">  {{item.activityName}} </font>
              <font v-else> 审批完成 </font>

              </el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="选择审批人"  prop="user" v-if="!iswillEnd">
             <el-select v-model="form.user" placeholder="请选择选择审批人">
                  <el-option v-for="(item,index)  in activityUserList"
                   :label="item.nickName"
                   :value="item.userName"
                   ></el-option>
             </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" v-if="!iswillEnd" >确 定</el-button>
       <el-button type="primary" @click="submitForm" v-if="iswillEnd" >完结</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getNextUserTaskList,complete } from "@/api/activiti/pocess";
export default {
 name: "pocesComplete",
  props: {

    detailDialog: {
    		   type: Object,
    		   default: function () {
    		      return {
                 // 任务id
    					   taskId: null,
    					   open: null,
                 vars : null,

    				   }
    		   },
    },



  },
  data() {
    return{
        id : null,
        form:{
          taskId : null,
          remark: "",
          activityIndex: 0 ,
          activityId: "",
          user: "",
          vars: this.detailDialog.vars,

        },
        grcUserTasks:[
          {
            willEnd:null ,
            expression:null ,
          },

          ],

        // 表单校验
        rules: {
            activityIndex: [
              { required: true, message: "选择下一步选择不能为空", trigger: "blur" }
            ],
            user: [
              { required: true, message: "选择审批人不能为空", trigger: "blur" }
            ],
        },
    };
  },

  computed: {
    //动态现在用户
    activityUserList: function () {
      if(this.grcUserTasks.length>0){
          return this.selectTask.userList;
      }
    },
    //是否完结
    iswillEnd:function () {
        if(this.grcUserTasks.length<0){
          return true
        } else {

             //let task = this.selectTask;
             //console.log("iswillEnd:"+task);
             return this.grcUserTasks[this.form.activityIndex].willEnd;
        }
    },

    selectTask :function () {
        return this.grcUserTasks[this.form.activityIndex]
    },


  },

  created() {
       this.initDate();
  },

  watch: {

      /* 监听打开状态 */
      "detailDialog.open": function(newOpen, oldOpen) {
        //显示则刷新
        if (newOpen) {

          this.initDate();
          console.log( this.$options.name +"监听打开状态", this.detailDialog.taskId , this.id )
        }
      },

  },

  methods: {
    /* 初始化DetailDialog */
    initDetailDialog(){
      this.id=this.detailDialog.taskId

    },
    initDate(){
     this.initDetailDialog();
      getNextUserTaskList(this.id+"").then(response => {

            this.form.activityIndex= 0,
            this.grcUserTasks = response.data;

       });
    },

     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if(this.iswillEnd){
              this.form.user="admin";
           }else{
             this.form.activityId=this.grcUserTasks[this.form.activityIndex].activityId;
           }
           this.form.taskId=this.id
           this.form.vars.remark=this.form.remark;
           const expression= this.selectTask.expression;
           for (let userTasks of this.grcUserTasks) {
             let expres=userTasks.expression;
             if(expression==expres){
                 this.form.vars.[expres]=true;
             }else{
                this.form.vars.[expres]=false;
             }
           }

            //this.msgSuccess(this.form);
             complete(this.form).then(response => {
               this.msgSuccess("提交成功");
                console.log(response)
               this.parentRefresh();


              //  this.getList();
             });

         }
       });
     },
     /* 关闭子页面*/
     cancel() {
       this.detailDialog.open= !this.detailDialog.open
       this.$emit("update:detailDialog", this.detailDialog);
     },
     /* 关闭子页面刷新父页面 */
     parentRefresh(){
        this.cancel();
        this.$emit("doRefresh");
     },
  }



}
</script>

<style>
</style>
